---
title: "Single Row Selection"
description: "Configure single row selection, with and without checkboxes"
---

Enable users to select a single row within a grid.

## Enabling Single Row Selection

To enable single row selection set `rowSelection.mode` to `'singleRow'`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'singleRow'
    }
}
```

The example below uses this configuration to restrict selection to a single row

{% gridExampleRunner title="Enabling Row Selection" name="enabling-row-selection" /%}

Deselect a row by clicking its checkbox. Alternatively, you can do this via the keyboard by focusing the row and pressing the {% kbd "␣ Space" /%} key.

## Removing Selection Checkboxes

To prevent any row selection checkboxes from being rendered, set `rowSelection.checkboxes` to `false`. You will also need to enable click selection by setting `enableClickSelection: true`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'singleRow',
        checkboxes: false,
        enableClickSelection: true,
    }
}
```

{% gridExampleRunner title="Disabling Checkboxes" name="removing-selection-checkboxes" /%}

{% note %}
You may also pass a function to `rowSelection.checkboxes` to dynamically enable or disable checkboxes for given rows.
{% /note %}

## Configure Selectable Rows

It is possible to specify which rows can be selected via the `rowSelection.isRowSelectable` callback function.

For instance if we only wanted to allow selection for rows where the 'year' property is less than 2007, we could implement the following:

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'singleRow',
        isRowSelectable: (rowNode) => rowNode.data ? rowNode.data.year < 2007 : false,
        hideDisabledCheckboxes: true
    }
}
```

Rows for which `isRowSelectable` returns `false` cannot be selected at all, whether using the UI or the API.

{% gridExampleRunner title="Configuring Selectable Rows" name="configure-selectable-rows" /%}

Note this example uses `hideDisabledCheckboxes` to hide disabled checkboxes, which can be toggled on or off.

## Customising the Checkbox Column
The checkbox column may be customised in a similar way to any other column, by specifying its column definition in the `selectionColumnDef` grid option.

{% apiDocumentation source="grid-options/properties.json" section="selection" names=["selectionColumnDef"] /%}

The `SelectionColumnDef` allows for a great deal of customisation, including custom renderers, sorting, tooltips and more.
The example below demonstrates the following configuration:
- allowing sorting using the default sort order (selected first) via the header menu
- changing the default width of the column
- allowing resizing
- adding some header tooltip text

```{% frameworkTransform=true %}
const gridOptions = {
    selectionColumnDef: {
        sortable: true,
        resizable: true,
        width: 100,
        suppressHeaderMenuButton: false,
        headerTooltip: 'Checkboxes indicate selection',
    }
}
```

{% gridExampleRunner title="Customising Checkbox Column" name="customise-checkbox-column" /%}

{% note %}
When sorting by the checkbox column, selecting a new row will not automatically update the row order, see [Change Detection](./change-detection/#change-detection-and-sorting-filtering-grouping)
for more information.
{% /note %}

{% note %}
The checkbox column is sized statically, and is therefore not affected by [Auto-Sizing](./column-sizing/#auto-sizing-columns).
{% /note %}

## Enable Click Selection & Deselection

The `rowSelection.enableClickSelection` property configures whether a row's selection state will be impacted when the row is clicked. 

{% interfaceDocumentation interfaceName="SingleRowSelectionOptions" names=["enableClickSelection"] config={"description": ""}/%}

This is typically used when [Checkbox Selection](#removing-selection-checkboxes) is disabled, though both can be enabled simultaneously if desired. 
Click-selection and deselection can be enabled by setting `enableClickSelection` to `true`, otherwise they may be enabled separately using the values `'enableSelection'` and `'enableDeselection'`.

```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: { 
        mode: 'singleRow',
        enableClickSelection: true,
    }
}
```

The example below demonstrates the three possible configurations for this property, as well as the behaviour when it is disabled. Click a row to select it, or {% kbd "^ Ctrl" /%}-click a row to deselect it. Use the select element to switch between modes.

{% gridExampleRunner title="Disable Click Selection" name="suppress-click-selection" /%}

{% note %}
Note that deselection is still possible using the {% kbd "␣ Space" /%} key or when checkboxes are enabled by clicking a selected checkbox.
{% /note %}

## API Reference

See the full list of configuration options available in `'singleRow'` mode.

{% interfaceDocumentation interfaceName="SingleRowSelectionOptions" config={"description":""} /%}

## Next up

Row selection works with row grouping, tree data, and the server-side row model. See the relevant documentation sections:

- [Row Group Selection](./grouping-row-selection)
- [Tree Data Selection](./tree-data-selection)
- [Server-Side Row Model Selection](./server-side-model-selection)

Continue to the next section to learn about [Multi-Row Selection](./row-selection-multi-row).
